<h3>描述</h3>
<p>1.Select的下拉选项如果需要分页显示，需要通过footer将分页添加到下拉面板，如果footer功能异常，参考“模板”示例。</p>
<p>2.分页结合后台搜索的功能，需要开发者控制分页的<span class="demo-code"> currentPage </span>，并且将对应页码的options数据传入组件。</p>
<h3>导入</h3>
<span>import {{ '{' }} TiSelectModule, TiPaginationModule {{ '}' }} from '@opentiny/ng';</span>
<h3>示例</h3>
<p>设置options和自定义内容模板：</p>

<h4>1.单选 + 搜索 + 分页:</h4>
<ti-select
  style="width: 300px"
  #select1
  [options]="myOptions1"
  [searchable]="true"
  [(ngModel)]="mySelected1"
  (beforeSearch)="onBeforeSearch1($event)"
  placeholder="请选择"
  id="myselect1"
>
  <ng-template #footer>
    <ti-pagination
      [pageSize]="pageSize"
      [showTotalNumber]="false"
      [(totalNumber)]="totalNumber1"
      [(currentPage)]="currentPage1"
      (currentPageChange)="onCurrentPageChange1($event, select1)"
    ></ti-pagination>
  </ng-template>
</ti-select>
<br />
<p>选中项：{{mySelected1 | json}}</p>

<h4>2.单选 + 搜索 + 分页 + beforeOpen</h4>
<ti-select
  style="width: 300px"
  #select2
  [options]="myOptions2"
  [searchable]="true"
  [(ngModel)]="mySelected2"
  (beforeOpen)="onBeforeOpen2($event)"
  (beforeSearch)="onBeforeSearch2($event)"
  placeholder="请选择"
  id="myselect2"
>
  <ng-template #footer>
    <ti-pagination
      [pageSize]="pageSize"
      [showTotalNumber]="false"
      [(totalNumber)]="totalNumber2"
      [(currentPage)]="currentPage2"
      (currentPageChange)="onCurrentPageChange2($event, select2)"
    ></ti-pagination>
  </ng-template>
</ti-select>
<br />
<p>选中项：{{mySelected2 | json}}</p>

<h4>3.多选 + 搜索 + 分页：</h4>
<br />
<ti-select
  style="width: 300px"
  #select3
  [multiple]="true"
  [options]="myOptions3"
  [(ngModel)]="mySelected3"
  placeholder="请选择"
  [searchable]="true"
  (beforeSearch)="onBeforeSearch3($event)"
  id="myselect3"
>
  <ng-template #footer>
    <ti-pagination
      [pageSize]="pageSize"
      [showTotalNumber]="false"
      [(totalNumber)]="totalNumber3"
      [(currentPage)]="currentPage3"
      (currentPageChange)="onCurrentPageChange3($event, select3)"
    ></ti-pagination>
  </ng-template>
</ti-select>
<br />
<p>选中项：{{mySelected3 | json}}</p>

<h4>4.多选 + 搜索 + 分页 + beforeOpen：</h4>
<br />
<ti-select
  style="width: 300px"
  #select4
  [multiple]="true"
  [options]="myOptions4"
  [(ngModel)]="mySelected4"
  placeholder="请选择"
  [searchable]="true"
  (beforeOpen)="onBeforeOpen4($event)"
  (beforeSearch)="onBeforeSearch4($event)"
  id="myselect4"
>
  <ng-template #footer>
    <ti-pagination
      [pageSize]="pageSize"
      [showTotalNumber]="false"
      [(totalNumber)]="totalNumber4"
      [(currentPage)]="currentPage4"
      (currentPageChange)="onCurrentPageChange4($event, select4)"
    ></ti-pagination>
  </ng-template>
</ti-select>
<br />
<p>选中项：{{mySelected4 | json}}</p>
